import React from "react";
import {
  Layout,
  Typography,
  Form,
  Input,
  Select,
  InputNumber,
  DatePicker,
  Button,
  Upload,
  Checkbox,
  Space,
} from "antd";
import { UserOutlined, UploadOutlined } from "@ant-design/icons";
import styles from "./index.module.less";

const { Title } = Typography;
const { TextArea } = Input;

const TaskCardCreate: React.FC = () => {
  const [form] = Form.useForm();

  const handleSubmit = (values: any) => {
    console.log("Form values:", values);
  };

  const handleCancel = () => {
    form.resetFields();
  };

  return (
    <Layout className={styles.container} data-oid="ta_0d-c">
      <Title level={4} data-oid="th8iljl">
        新建卡片
      </Title>
      <Form
        form={form}
        layout="vertical"
        onFinish={handleSubmit}
        className={styles.form}
        data-oid="o24mawx"
      >
        <Form.Item
          label="任务标题"
          name="title"
          rules={[{ required: true, message: "请输入任务标题" }]}
          data-oid=":8cikpp"
        >
          <Input placeholder="请输入" data-oid="c1qu0cf" />
        </Form.Item>

        <Form.Item label="标签" name="tag" data-oid="2z8le.h">
          <Select placeholder="请选择" data-oid="utv73kk" />
        </Form.Item>

        <Form.Item label="所属面板" name="panel" data-oid="q98oyra">
          <Select placeholder="请选择" data-oid="h.y_lk6" />
        </Form.Item>

        <Form.Item
          label="所属项目"
          name="project"
          rules={[{ required: true, message: "请选择所属项目" }]}
          data-oid="t2x0rg-"
        >
          <Select placeholder="请选择项目/泳道" data-oid=".32m0k:" />
        </Form.Item>

        <Form.Item
          label="任务类型"
          name="taskType"
          rules={[{ required: true, message: "请选择任务类型" }]}
          data-oid="04e0z.9"
        >
          <Space data-oid="idgk.mo">
            <Select
              placeholder="请选择"
              style={{ width: 200 }}
              data-oid="lgkrsza"
            />

            <InputNumber
              min={0}
              step={0.5}
              placeholder="大于0且为0.5的倍数"
              style={{ width: 200 }}
              data-oid="_zkdcyw"
            />
          </Space>
        </Form.Item>

        <Form.Item label="经办人" name="assignee" data-oid="jk_t9z0">
          <Space data-oid="tyqz.8t">
            <Button
              icon={<UserOutlined data-oid="o05c9z_" />}
              data-oid="kkd.u1s"
            >
              分配给我
            </Button>
            <Select
              placeholder="请选择"
              style={{ width: 200 }}
              data-oid="c0:e7ft"
            />

            <Select
              placeholder="优先级 *"
              style={{ width: 200 }}
              data-oid="xy2j4-v"
            />
          </Space>
        </Form.Item>

        <Form.Item label="计划时间" name="planTime" data-oid=".ybo-jr">
          <Space data-oid="m4ofrvo">
            <DatePicker placeholder="计划开始时间" data-oid="xj8nscm" />
            <Button data-oid="yrgue:_">设为今天</Button>
            <DatePicker placeholder="计划完成时间" data-oid="8kx4-pv" />
          </Space>
        </Form.Item>

        <Form.Item label="卡片描述" name="description" data-oid="wo2xjtr">
          <TextArea
            placeholder="请输入卡片描述"
            autoSize={{ minRows: 4, maxRows: 8 }}
            data-oid="wmwp69v"
          />
        </Form.Item>

        <Form.Item label="附件" name="attachments" data-oid="_ink-ll">
          <Upload multiple data-oid="bhjq-z0">
            <Button
              icon={<UploadOutlined data-oid="5m1xq8x" />}
              data-oid="f5csf4d"
            >
              上传附件
            </Button>
          </Upload>
          <div className={styles.uploadTip} data-oid="6alrs4o">
            不支持上传exe, bat, sh, cmd
          </div>
        </Form.Item>

        <Form.Item
          name="continueCreate"
          valuePropName="checked"
          data-oid="3zn17sf"
        >
          <Checkbox data-oid="i74fzxy">继续创建下一张</Checkbox>
        </Form.Item>

        <Form.Item data-oid="1t1kd.e">
          <Space data-oid="p-dhu2b">
            <Button onClick={handleCancel} data-oid="-p2-84y">
              取消
            </Button>
            <Button type="primary" htmlType="submit" data-oid="36t7qk-">
              确定
            </Button>
          </Space>
        </Form.Item>
      </Form>
    </Layout>
  );
};

export default TaskCardCreate;
